<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/element/theme-chalk/index.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/nth-tabs-master/css/nth-icons.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/nth-tabs-master/css/nth-tabs.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/public/css/app/app.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/jquery.scrollbar/jquery.scrollbar.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/Font-Awesome/css/font-awesome.min.css}">


<!--    <link href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">-->
<!--    <link href="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css" rel="stylesheet">-->
    <style type="text/css">
        * {
            outline: 0;
            padding: 0;
            margin: 0;
            border: 0;
        }
        #app{
            height: 100%;
            overflow: auto;
        }
    </style>
    <template type="x-template" id="head">
        <div class="header">
            <!-- 折叠按钮 -->
            <div class="collapse-btn" @click="collapseChage">
                <i v-if="!collapse" class="el-icon-s-fold"></i>
                <i v-else class="el-icon-s-unfold"></i>
            </div>
            <div class="logo">后台管理系统</div>
            <div class="header-right">
                <div class="header-user-con">
                    <!-- 全屏显示 -->
                    <div class="btn-fullscreen" @click="handleFullScreen">
                        <el-tooltip effect="dark" :content="fullscreen?'取消全屏':'全屏'" placement="bottom">
                            <i class="el-icon-rank"></i>
                        </el-tooltip>
                    </div>
                    <!-- 消息中心 -->
                    <div class="btn-bell">
                        <el-tooltip
                                effect="dark"
                                :content="message?'有${message}条未读消息':'消息中心'"
                                placement="bottom"
                        >
                            <!--                            <router-link to="/tabs">-->
                            <!--                                <i class="el-icon-bell"></i>-->
                            <!--                            </router-link>-->
                        </el-tooltip>
                        <span class="btn-bell-badge" v-if="message"></span>
                    </div>
                    <!-- 用户头像 -->
                    <div class="user-avator">
                        <img th:src="@{/public/css/assets/img/img.jpg}" />
                    </div>
                    <!-- 用户名下拉菜单 -->
                    <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" th:text="${session.name}">
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <a href="https://github.com/lin-xin/vue-manage-system" target="_self">
                                <el-dropdown-item>项目仓库</el-dropdown-item>
                            </a>
                            <a th:href="logout" target="_blank">
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </a>
<!--                            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>-->
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </template>
    <template type="x-template" id="sidebar">
        <div class="sidebar">
            <el-menu
                    class="sidebar-el-menu"
                    :collapse="collapse"
                    :default-active="active"
                    background-color="#324157"
                    text-color="#bfcbd9"
                    active-text-color="#20a0ff"
                    unique-opened
            >
                <template v-for="item in items">
                    <template v-if="item.menus">
                        <el-submenu :index="item.menuCode" :key="item.menuId">
                            <template slot="title">
                                <i :class="item.iconCls"></i>
                                <span slot="title">{{ item.menuName }}</span>
                            </template>
                            <template v-for="subItem in item.menus">
                                <el-submenu
                                        v-if="subItem.menus"
                                        :index="subItem.menuCode"
                                        :key="subItem.menuId"
                                >
                                    <template slot="title">{{ subItem.menuName }}</template>
                                    <el-menu-item
                                            v-for="(threeItem,i) in subItem.menus"
                                            :key="i"
                                            :index="threeItem.menuCode"
                                            :path="threeItem.url"
                                            @click="handClick(threeItem)"
                                    >{{ threeItem.menuName }}</el-menu-item>
                                </el-submenu>
                                <el-menu-item
                                        v-else
                                        :index="subItem.menuCode"
                                        :key="subItem.menuId"
                                        :path="subItem.url"
                                        @click="handClick(subItem)"
                                >{{ subItem.menuName }}</el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.menuCode" :key="item.menuId" :path="item.url" @click="handClick(item)">
                            <i :class="item.iconCls"></i>
                            <span slot="title">{{ item.menuName }}</span>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </div>
    </template>

</head>
<body>
<div id="app">
    <div class="wrapper">
        <v-head></v-head>
        <v-sidebar ref="sidebar"></v-sidebar>
            <div class="content-box" :class="{'content-collapse':collapse}">
                <div class="content-wrapper">
                    <div class="nth-tabs" id="main-tabs">
                    </div>
                </div>
            </div>
    </div>
</div>
</body>
<script th:src="@{/public/js/app/app.js}" type="text/javascript"></script>
<script th:src="@{/plugins/jquery/dist/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/plugins/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/plugins/jquery.scrollbar/jquery.scrollbar.min.js}" type="text/javascript"></script>
<!-- 有修改，不适用min-->
<script th:src="@{/plugins/nth-tabs-master/js/nth-tabs.js}" type="text/javascript"></script>
<!--<script th:src="@{/plugins/vue.min.js}" type="text/javascript"></script>-->
<script th:src="@{/plugins/vue.js}" type="text/javascript"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script th:src="@{/plugins/element/js/index.js}" type="text/javascript"></script>-->
<script th:src="@{/plugins/axios/axios.min.js}" type="text/javascript"></script>
<script th:inline="javascript">
    var context = [[@{/}]];
</script>
<script>
    const bus = new Vue();
    var vHead = {
        template:"#head",
        data() {
            return {
                collapse: false,
                fullscreen: false,
                name: 'linxin',
                message: 2
            };
        },
        computed: {
        },
        methods: {
            // 用户名下拉菜单选择事件
            handleCommand(command) {
            },
            // 侧边栏折叠
            collapseChage() {
                this.collapse = !this.collapse;
                bus.$emit('collapse', this.collapse);
            },
            // 全屏事件
            handleFullScreen() {
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            }
        },
        mounted() {
        }
    }
    var nthTabs;

    var vSidebar = {
        template:"#sidebar",
        data() {
            return {
                active: "",
                collapse: false,
                selectNode:{},
                items: []
            };
        },
        computed: {
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handSelect(key, keyPath){
                this.selectNode = null;
                this.getNode(key,this.items);
            },
            getNode(index,items){
                for(var i=0;i<items.length;i++){
                    if(this.selectNode!=null){
                        break;
                    }
                    if(items[i].subs && items[i].subs.length>0){
                        this.getNode(index,items[i].subs);
                    }else{
                        if(index==items[i].index){
                            this.selectNode = items[i];
                            break;
                        }
                    }
                }
            },
            handClick(item){
                nthTabs.addTab({
                    id: item.menuCode,
                    title: item.menuName,
                    url: context+item.url,
                    active: true,
                    allowClose: true
                })
            },
        },
        mounted() {

        },
        created(){
            bus.$on('collapse', msg => {
                this.collapse = msg;
                bus.$emit('collapse-content', msg);
            });
            bus.$on('activemenu', msg => {
                this.active = msg;
            });
            bus.$on('items', msg => {
                this.items = msg;
            });
        }
    }


    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                collapse: false
            }
        },
        components:{
            'v-head':vHead,
            'v-sidebar':vSidebar
        },
        methods:{
            async initItems(){
                var res = {};
                await axios.get(context+'getMenus?pCode=m_00')
                    .then(response => {
                        res = response.data;
                        bus.$emit('items', res);
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
                return res;
            }
        },
        created() {
            this.initItems();
            bus.$on('collapse-content', msg => {
                this.collapse = msg;
            });
        }
    });

    function setActivemenu(menuCode){
        vm.$refs.sidebar.updateactivemenu(menuCode)
    }


    $(function(){
        nthTabs = $("#main-tabs").nthTabs();

        // 新建选项卡示例
        nthTabs.addTab({
            id: 'home',
            title: '首页',
            url: context+"main",
            active: true,
            allowClose: false
        });
    })
</script>
</html>